<template>
  <view>
    <u-modal v-model="show" :content="content" :show-cancel-button="true" @confirm="confirm" @cancel="cancel"></u-modal>
    <view class="apply">
      <text>{{ form.name }}的请销假</text>
    </view>
    <view class="apply-container">
      <view class="apply-person">
        <text class="title">申请人</text>
        <view class="name">
          <text class="tag">姓名</text>
          <text>{{ form.name }}</text>
          <text>（</text>
          <text>{{ form.num }}</text>
          <text>）</text>
        </view>
      </view>
      <view class="apply-content">
        <text class="title">申请内容</text>
        <view class="form">
          <u-form :model="form">
            <u-form-item  label-width="145" label="审批编号" prop="isOut">
              <text>{{ form.id }}</text>
            </u-form-item>
            <u-form-item label-width="145" label="是否离校" prop="isOut">
              <text>{{ form.isGoOut }}</text>
            </u-form-item>
            <u-form-item label-width="145" label="开始时间" prop="begin">
              <text>{{ form.beginTime }}</text>
            </u-form-item>
            <u-form-item label-width="145" label="结束时间" prop="end">
              <text>{{ form.endTime }}</text>
            </u-form-item>
            <u-form-item label-width="200"  label="本人联系电话" prop="phoneNumber"><text>{{ form.phoneNumber }}</text></u-form-item>
            <u-form-item label-width="165"  label="紧急联系人" prop="emergencyContact"><text>{{ form.emergencyContact }}</text> </u-form-item>
            <u-form-item label-width="200"  label="紧急联系电话" prop="emergencyContactNumber"><text>{{ form.emergencyContactNumber }}</text></u-form-item>
            <u-form-item label-width="220"  label="请假(外出)原因" prop="reason"></u-form-item>
            <u-form-item>
              <text>{{ form.reason }}</text>
            </u-form-item>

            <u-form-item prop="to" label-width="145"  label="请假去向"><text>{{ form.leaveTo }}</text></u-form-item>
          </u-form>
        </view>
      </view>
      <view class="apply-process">
        <text class="title">审批进度</text>
        <view class="audit-process" v-show="form.audit === 2">未审批</view>
        <view class="audit-process" v-if="form.audit === 3">未通过</view>
        <view class="audit-process" v-show="form.audit === 1">
          <u-time-line>
            <u-time-line-item>
              <template v-slot:content>
                <view>
                  <view class="time-line-time">
                    <text class="course-category">已同意</text>
                  </view>
                  <view class="image-name">
                    <view v-if="form.audit === 1 && form.auditImg != null && form.auditImg !== ''">
                      <u-image width="100%" height="300rpx" :src="form.auditImg"></u-image>
                    </view>
                  </view>
                  <view class="time-line-title">通过 {{ form.gmtModified }}</view>
                </view>
              </template>
            </u-time-line-item>
          </u-time-line>
        </view>
      </view>
    </view>
    <view v-show="form.audit === 2">
      <view v-show="isShow">
        <u-button @click="createCanvas" type="primary" :ripple="true">通过</u-button>
        <view class="u-padding-20"></view>
        <u-button @click="notAudit" type="warning" :ripple="true">不通过</u-button>
      </view>
      <view class="signature" v-show="showCanvas">
        <canvas class="mycanvas" canvas-id="mycanvas" @touchstart="touchstart" @touchmove="touchmove" @touchend="touchend"></canvas>
        <view class="footer">
          <view class="left" @click="finish">保存</view>
          <view class="right" @click="clear">清除</view>
          <view class="close" @click="close">关闭</view>
        </view>
      </view>
    </view>
  </view>
</template>

<script>
import {getUrl} from "../../utils/constants";
import {getToken} from "../../common/auth";

export default {
  data() {
    return {
      form: {
        id: '',
        email: '',
        isGoOut: 1,
        gmtCreate:'',
        beginTime: '',
        endTime: '',
        audit: 0,
        num: '',
        name: '',
        gmtModified: '',
        phoneNumber: '',
        emergencyContact: '',
        emergencyContactNumber: '',
        reason: '',
        leaveTo: '',
        auditImg: ''
      },
      showCanvas:false,
      ctx:'',         //绘图图像
      points:[],       //路径点集合
      signature:'',
      //图片上传地址
      action: getUrl() + '/api/upload',
      header: {
        "token": getToken()
      },
      show: false,
      isShow: true,
      content: '当前审核为不通过，是否继续',
      index: 0,
    };
  },
  onLoad(e) {
    this.index = e.index;
    uni.$emit("setVuexUserInfo",{user:null,isLoginPage: false});
    this.$u.api.getAskForLeaveDetailById(e.id,'audit').then(res => {
      this.form = res.data;
      console.log(this.form)
    })
  },
  methods:{
    //关闭并清空画布
    close(){
      this.isShow = true
      this.showCanvas = false;
      this.clear();
    },
    //创建并显示画布
    createCanvas:function(){
      this.isShow = false
      this.showCanvas = true;
      this.ctx = uni.createCanvasContext("mycanvas",this);   //创建绘图对象
      //设置画笔样式
      this.ctx.lineWidth = 2;
      this.ctx.lineCap = "round"
      this.ctx.lineJoin = "round"
    },
    //触摸开始，获取到起点
    touchstart(e){
      let startX = e.changedTouches[0].x;
      let startY = e.changedTouches[0].y;
      let startPoint = {X:startX,Y:startY};
      this.points.push(startPoint);
      //每次触摸开始，开启新的路径
      this.ctx.beginPath();
    },

    //触摸移动，获取到路径点
    touchmove(e){
      let moveX = e.changedTouches[0].x;
      let moveY = e.changedTouches[0].y;
      let movePoint = {X:moveX,Y:moveY};
      this.points.push(movePoint);       //存点
      let len = this.points.length;
      if(len>=2){
        this.draw();                   //绘制路径
      }

    },

    // 触摸结束，将未绘制的点清空防止对后续路径产生干扰
    touchend(){
      this.points=[];
    },

    /* ***********************************************
    #   绘制笔迹
    #	1.为保证笔迹实时显示，必须在移动的同时绘制笔迹
    #	2.为保证笔迹连续，每次从路径集合中区两个点作为起点（moveTo）和终点(lineTo)
    #	3.将上一次的终点作为下一次绘制的起点（即清除第一个点）
    ************************************************ */
    draw() {
      let point1 = this.points[0]
      let point2 = this.points[1]
      this.points.shift()
      this.ctx.moveTo(point1.X, point1.Y)
      this.ctx.lineTo(point2.X, point2.Y)
      this.ctx.stroke()
      this.ctx.draw(true)
    },

    //清空画布
    clear(){
      let that = this;
      uni.getSystemInfo({
        success: function(res) {
          let canvasw = res.windowWidth;
          let canvash = res.windowHeight;
          that.ctx.clearRect(0, 0, canvasw, canvash);
          that.ctx.draw(true);
        },
      })
    },
    //完成绘画并保存到本地
    finish(){
      this.isShow = true
      let that = this;
      uni.canvasToTempFilePath({
        canvasId: 'mycanvas',
        success: function(res) {
          //上传到服务器
          // #ifdef H5
          that.$u.api.uploadBase64Data(res.tempFilePath).then(res => {
            that.form.auditImg = res.data;
            that.updateAskForLeave(1);
          })
          // #endif
          // #ifndef H5
          uni.uploadFile({
            url: that.action,
            name: "file",
            filePath: res.tempFilePath,
            header: that.header,
            success: (res) => {
              let data = JSON.parse(res.data);
              that.form.auditImg = data.data;
              that.updateAskForLeave(1);
            }
          });
          // #endif
        }
      })
    },
    updateAskForLeave(audit){
      let data = {
        id:this.form.id,
        audit: audit,
        auditUser: this.$store.getters.id,
        auditImg: this.form.auditImg,
        email: this.form.email
      }
      this.$u.api.updateAskForLeave(data).then(res => {
        if (res.code === 200){
          // 更新请假信息的审核状态
          uni.$emit("changeAudit",{index:this.index,audit:audit});
          if (audit !== 3){
            this.showCanvas = false;
            this.form.audit = 1;
            this.form.gmtModified = new Date().toLocaleString();
          }else {
            this.form.audit = 3;
          }
          this.$u.toast('成功！')
        }
      })
    },
    notAudit(){
      this.show = true;
    },
    confirm(){
      this.updateAskForLeave(3)
    },
    cancel(){
      this.show = false;
    }
  }
}
</script>

<style lang="scss">
.apply {
  font-size: 30rpx;
  font-weight: bold;
  text-align: center;
  margin: 20rpx 0 20rpx 0;
}
.apply-container {
  display: flex;
  flex-direction: column;
  justify-content: start;
  margin-left: 30rpx;
  .apply-person {
    .title {
      font-size: 25rpx;
      font-weight: bold;
      margin: 20rpx 0 20rpx 0;
    }
    .name {
      margin: 20rpx 0 20rpx 30rpx;
      .tag {
        margin-right: 30rpx;
      }
    }
  }
  .apply-content {
    .title {
      font-size: 25rpx;
      font-weight: bold;
      margin: 20rpx 0 20rpx 0;
    }
    .form {
      margin-left: 30rpx;
    }
  }
  .apply-process {
    .title {
      font-size: 25rpx;
      font-weight: bold;
      margin: 20rpx 0 20rpx 0;
    }

    .audit-process {
      margin: 20rpx 0 20rpx 30rpx;
      color: green;
      .time-line-name {
        display: flex;
        justify-content: space-between;
        margin: 20rpx 0 20rpx 0;
        color: black;
        .time {
          color: green;
          margin-right: 20rpx;
        }
      }
      .time-line-time {
        display: flex;
        flex-direction: column;
        justify-content: space-between;
        .image-name {
          margin: 20rpx 0 20rpx 0;
        }
      }
      .time-line-title{
        margin: 20rpx 0 20rpx 0;
      }
    }
  }
}
.signature {
  position: fixed;
  bottom: 10rpx;
  left: 1%;
  z-index: 999;
  width:96%;
}
.container {
  padding: 20rpx 0 120rpx 0;
  box-sizing: border-box;
}
.title{
  height:50upx;
  line-height: 50upx;
  font-size: 16px;
}
.mycanvas{
  width: 100%;
  height: 300rpx;
  background-color: #ECECEC;
}
.footer{
  font-size: 14px;
  height: 150upx;
  display: flex;
  justify-content: space-around;
  align-items: center;
}
.left,.right,.close{
  line-height: 100upx;
  height: 100upx;
  width: 220upx;
  text-align: center;
  font-weight: bold;
  color: white;
  border-radius: 5upx;
}
.left{
  background: #007AFF;
}
.right{
  background:orange;
}
.close {
  background:#A3A3A3;
}
</style>







